<template>
  <span @click="changeArrow">
    <down-outlined class="arrow-icon" v-show="isExpand" />
    <right-outlined class="arrow-icon" v-show="!isExpand" />
  </span>
  <!-- 🌲结点 icon -->
  <span>
    <file-outlined />
    <folder-open-outlined />
  </span>
  <!-- 🌲结点 name -->
  <div class="children" v-if="data.children">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue";
import {
  DownOutlined,
  RightOutlined,
  FileOutlined,
  FolderOpenOutlined,
} from "@ant-design/icons-vue";

interface TanyTodo {
  [key: string]: any;
}

const props = defineProps({
  data: Object,
});

const isExpand = ref(false); // 是否展开
const data = ref(props.data);

/**展开文件夹 */
const changeArrow = () => {
  isExpand.value = !isExpand.value;
};

watch(isExpand, (val) => {
  console.log(val);
});
</script>

<style lang="scss" scoped>
.arrow-icon {
  font-size: 20px;
}
.children {
  margin-left: 20px;
}
</style>
